<template>
  <view class="bg-light" style="height: 100vh">
    <!-- 顶部导航栏 -->
    <view
      class="flex fixed-top"
      style="justify-content: space-around; background-color: #fff"
    >
      <view
        class="p-2"
        @click="select(i)"
        v-for="(item, i) in Navigationgroups"
        :key="i"
      >
        <view
          class="pb-2 px-2"
          :class="'font' + ' ' + (i == active ? 'active' : '')"
        >
          {{ item }}
        </view>
      </view>
    </view>
    <view
      v-if="BlanceData.length > 0 ? false : true"
      class="flex flex-column align-center justify-between"
    >
      <image :src="Domain_ICON + '/zanwugouwu.png'" mode="widthFix"></image>
      <text>您还没有相关余额明细</text>
    </view>
    <!-- 余额明细组 -->
    <view v-else class="flex flex-column" style="margin-top: 150rpx">
      <view
        @click="goincome(item)"
        class="flex align-center justify-between p-2 bg-white"
        style="border-bottom: 2rpx solid #eeeeee"
        v-for="(item, i) in BlanceData"
        :key="i"
      >
        <view class="flex flex-column text-center">
          <text class="font-small mb-2">{{
            item.Order_Type == "0"
              ? "余额充值"
              : item.Order_Type == "1"
              ? "余额支付"
              : item.Order_Type == "2"
              ? "退款"
              : ""
          }}</text>
          <text class="font-small" style="color: #bbb">{{
            item.Collection_Date
          }}</text>
        </view>
        <view class="font-sm flex align-center flex-column">
          <view class="flex align-center font-weight-bold">
            <text
              >{{ item.Order_Type == "1" ? "-" : "" }}￥{{
                accAdd(item.Prepayment_Sales, item.Gift_Sales)
              }}<text class="font-small">{{
                item.Order_Type == "0" ? `(含赠送金额￥${item.Gift_Sales})` : ""
              }}</text></text
            >
            <uni-icons
              size="15"
              style="color: #eeeeee"
              class="ml-2"
              type="right"
            ></uni-icons>
          </view>
          <text class="mt-2"
            >当前余额:￥{{
              accAdd(item.Gift_Balance, item.Prepayment_Balance)
            }}</text
          >
        </view>
      </view>
    </view>
    <!-- 底部提示 -->
    <view
      v-show="BlanceData.length > 0 ? true : false"
      class="flex justify-center font-sm mt-2"
    >
      <text>{{ status }}</text>
    </view>
  </view>
</template>

<script>
const app = getApp();
export default {
  data() {
    return {
      Navigationgroups: ["全部", "收入", "支出"], //导航栏
      active: "", //激活项
      status: "下拉查看更多", //下拉状态默认
      isloding: true,
      contentText: {
        //下拉状态切换
        contentdown: "下拉查看更多",
        contentrefresh: "加载中...",
        contentnomore: "没有更多了",
      },
      formData: {
        //提交查询的数据
        Member_SerialNumber: app.globalData.memberInfo.Member_SerialNumber,
        page: 1,
        limit: 8,
        Order_Type: "",
      },
      BlanceData: [], //显示的数据
      total: 0, //查询的总数
      Domain_ICON: app.globalData.Domain_ICON, //全局变量域名
    };
  },
  onLoad() {
    //进入时默认查询全部
    this.select(0);
  },
  onReachBottom() {
    //触底函数
    //当查询到的所有数据总和不超过返回的总数时触发下一页请求
    if (this.BlanceData.length < this.total) {
      this.formData.page++;
      console.log(this.formData);
      this.getBlanceData(this.formData);
    } else {
      //反之则提示"没有更多了"
      this.status = this.contentText.contentnomore;
    }
  },
  methods: {
    //切换导航栏的同时查询对应
    select(index) {
      //根据点击选项卡切换内容
      this.active = index;
      if (index == 0) {
        //每次切换都要内容重置
        this.BlanceData = [];
        //每次切换都要回到顶部
        this.gotop();
        //每次查询默认页数为1
        this.formData.page = 1;
        //状态根据切换变更
        this.formData.Order_Type = "";
        //查询对应内容
        this.getBlanceData(this.formData);
      } else if (index == 1) {
        this.BlanceData = [];
        this.gotop();
        this.formData.page = 1;
        this.formData.Order_Type = "0";
        this.getBlanceData(this.formData);
      } else {
        this.BlanceData = [];
        this.gotop();
        this.formData.page = 1;
        this.formData.Order_Type = "1";
        this.getBlanceData(this.formData);
      }
    },
    goincome(data) {
      uni.navigateTo({
        url: `/pages/my/Incomedetails?BalanceData=${encodeURIComponent(
          JSON.stringify(data)
        )}`,
      });
    },
    gotop() {
      uni.pageScrollTo({
        scrollTop: 0,
      });
    },
    accAdd(arg1, arg2) {
      //浮点型相加
      var r1, r2, m;
      try {
        r1 = arg1.toString().split(".")[1].length;
      } catch (e) {
        r1 = 0;
      }
      try {
        r2 = arg2.toString().split(".")[1].length;
      } catch (e) {
        r2 = 0;
      }
      m = Math.pow(10, Math.max(r1, r2));
      return (arg1 * m + arg2 * m) / m;
    },
    getBlanceData(data) {
      var _this = this;
      //每次查询时显示"加载中"
      this.status = this.contentText.contentrefresh;
      //节流
      if (this.isloding) {
        this.isloding = false;
        uni.request({
          url: app.globalData.Domain_Name + "/WXBalanceDetailAction",
          header: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
          method: "POST",
          data,
          success: (res) => {
            console.log(res.data);
            //定义变量保存最大查询数
            _this.total = parseInt(res.data.limit);
            //将每次查询到的内容添加到数组中
            _this.BlanceData.push(...res.data.tableData);
          },
          complete() {
            //查询完毕↓
            _this.isloding = true;
            //如果查询不到内容则显示"没有更多了"
            if (_this.BlanceData.length == 0) {
              _this.status = _this.contentText.contentnomore;
            } else {
              //反之显示为"下拉查看更多"
              _this.status = _this.contentText.contentdown;
            }
          },
        });
      }
    },
  },
};
</script>

<style lang="scss">
.font {
  color: gray;
  border-bottom: 4rpx solid transparent;
}
.active {
  border-bottom: 4rpx solid orange;
  color: #000000;
}
</style>
